
<template>
  <div class="main-container">
    <div class="filtrate-bar">
      <div class="title-box">
        <div class="icon-box">
          <span class="wk wk-my-task icon" />
        </div>
        <span class="text">客户跟进方式分析</span>
      </div>
    </div>

    <div class="content">
      <div class="axis-content">
        <div id="axismain" />
      </div>
      <div class="table-content">
        <div class="handle-bar">
          <!-- <a-button class="export-btn">导出</a-button> -->
        </div>
        <a-table
          :scroll="{ y: 340 }"
          :columns="fieldList"
          :data-source="list"
          :pagination="false"
        />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import BaseMixin from './Base'
export default {
  /** 客户总量分析 */
  name: 'CustomerTotalStatistics',
  mixins: [BaseMixin],
  data() {
    return {
      loading: false,

     pieOption: null,

      postParams: {}, // 筛选参数
      dataIndex: null,

      list: [],
      axisList: [],
      fieldList: [
        {
          title: '跟进方式',
          dataIndex: 'category',
          key: 'category',
          sorter: (a, b) => a.category - b.category,
        },
        {
          title: '新增客户数',
          dataIndex: 'recordNum',
          key: 'recordNum',
          sorter: (a, b) => a.recordNum - b.recordNum,
        },
        {
          title: '占比（%）',
          dataIndex: 'proportion',
          key: 'proportion',
          sorter: (a, b) => a.proportion - b.proportion,
        },
      ],
      tableList: [
      ],
    }
  },
  computed: {
    // 列表请求参数
    listPostParams() {
      const params = { ...this.postParams }

      if (this.dataIndex !== undefined && this.dataIndex !== null) {
        const dataItem = this.axisList[this.dataIndex]
        delete params.type
        params.startTime = dataItem.type
        params.endTime = dataItem.type
      }

      return params
    },
  },
  mounted() {
    this.initPie()
    this.getDataList()
  },
  methods: {
    /**
     * 搜索点击
     */
    searchClick(params) {
      this.postParams = params
      this.getDataList()
      this.getRecordList()
    },
    /**
     * 图表数据   待完善
     */
    getDataList(params) {
      this.postParams = params
      this.loading = false
      this.list = [
        { proportion: 6.66, category: '发短信', recordNum: 1 },
        { proportion: 20.0, category: '发邮件', recordNum: 3 },
        { proportion: 66.66, category: '打电话', recordNum: 10 },
        { proportion: 6.66, category: '见面拜访', recordNum: 1 },
      ]

      const pieData = []
      const axisData = []
      const legendData = []
      for (let index = 0; index < this.list.length; index++) {
        const element = this.list[index]
        pieData.push({ name: element.category, value: element.proportion })
        legendData.push(element.category)
      }

      this.pieOption.legend.data = legendData
      this.pieOption.series[0].data = pieData

      this.chartObj.setOption(this.pieOption, true)
    },
    /**
     * 获取相关列表
     */
    getRecordList(dataIndex) {
      this.dataIndex = dataIndex
      this.list = []
      this.loading = true
      biCustomerTotalListAPI(this.listPostParams)
        .then((res) => {
          this.loading = false
          const data = [
            { proportion: 6.66, category: '发短信', recordNum: 1 },
            { proportion: 20.0, category: '发邮件', recordNum: 3 },
            { proportion: 66.66, category: '打电话', recordNum: 10 },
            { proportion: 6.66, category: '见面拜访', recordNum: 1 },
          ]
          this.list = data
          this.getSummariesData(data.total)
        })
        .catch(() => {
          this.loading = false
        })
    },
    /** 饼状图 */
    initPie() {
      this.chartObj = echarts.init(document.getElementById('axismain'))

      this.pieOption = {
        color: this.chartColors,
        toolbox: this.toolbox,
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}% ',
        },
        legend: {
          type: 'scroll',
          bottom: '0',
          x: 'center',
          data: [],
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            stillShowZeroSum: false,
            center: ['40%', '50%'],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
    },

    /**
     * 导出点击
     */
    exportClick() {
      this.requestExportInfo(biCustomerTotalListExportAPI, this.listPostParams)
    },
  },
}
</script>


<style lang="less" scoped>
.main-container {
  border: 1px solid #e6e6e6;
  border-radius: 2px;
  background-color: white;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.filtrate-bar {
  background-color: white;
  padding: 15px 20px 5px 20px;
  margin-right: 15px;
  line-height: 34px;
  .icon-box {
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    color: #168a40;
    background-color: #dfe8ff;
    border-radius: 50%;
    margin-right: 10px;
    float: left;
  }
  .text {
    font-size: 17px;
    font-weight: 700;
  }
}

.content {
  height: calc(100% - 54px);
  overflow-y: auto;
  padding: 10px 0;
}

.content-title {
  padding: 10px 20px 5px;
  font-size: 16px;
  color: #333;
}

.axis-content {
  padding: 20px 10% 40px;
  position: relative;
  .axismain,
  #axismain {
    margin: 0 auto;
    width: 100%;
    height: 400px;
  }
}

.table-content {
  padding: 0 60px 20px 60px;
}

.export-button {
  float: right;
  margin-right: 22px;
}

// 导出操作bug
.handle-bar {
  margin-bottom: 8px;
  text-align: right;
}

.search-box {
  padding-right: 15px;
}

.radio-box {
  padding: 0 20px;
  margin-bottom: 15px;
  /deep/ .el-radio__label {
    color: #99a9bf !important;
  }
}

.static {
  padding: 0 20px;
  margin-bottom: 10px;
  .text {
    font-size: 13px;
    color: #99a9bf;
    display: inline-block;
  }
  .text:not(:last-child) {
    margin-right: 15px;
  }
}
/deep/ .ant-table-wrapper {
  height: 400px;
  border: 1px solid #ebeef5;
}
/deep/ .ant-table-placeholder {
  display: none;
}
</style>

